<template>
  <div class="newcmt">
    <div class="cmtttile">
      <h3>最新评论<span>({{commenttotal}})</span></h3>
      <div class="cmt-itms" v-for="item in commentInfo" :key="item.user.id">
        <div class="head">
          <img :src="`${item.user.avatarUrl}?param=50y50`" alt="">
        </div>
        <div class="cntwrap">
          <div class="cnt">
            <a href="javascript:;">{{item.user.nickname}}</a>：{{item.content}}
          </div>
          <div class="rp">
            <div class="time">{{item.timeStr}}</div>
            <a href="javascript::">
              <i
                class="zan icon2"></i>({{item.likedCount> 100000 ?(item.likedCount / 10000).toFixed(1) + '万' : item.likedCount}})
            </a>
            <span class="sep">|</span>
            <a href="javascript::" style="color:#666;">回复</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'newcmt',
  props: {
    commentInfo: {
      type: Array,
      default: () => {
        return []
      }
    },
    commenttotal: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang='less' scoped>
.newcmt {
  margin-top: 20px;
}
.cmtttile {
  h3 {
    height: 20px;
    border-bottom: 1px solid #ccc;
    span {
      margin-left: 5px;
      color: #666;
    }
  }
}
.cmt-itms {
  display: flex;
  padding: 15px 0;
  border-top: 1px dotted #ccc;
  .head {
    width: 50px;
    height: 50px;
  }
  .cntwrap {
    width: 100%;
    margin-left: 10px;
    .cnt {
      width: 100%;
      overflow: hidden;
      line-height: 20px;
      a {
        color: #0c73c2;
        margin-right: 5px;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .rp {
      text-align: right;
      margin-top: 15px;
      .time {
        float: left;
        color: #999;
      }
      .sep {
        margin: 0 8px;
        color: #ccc;
      }
      a {
        &:hover {
          text-decoration: underline;
        }
      }
      .zan {
        margin-right: 5px;
        vertical-align: middle;
        margin-top: -2px;
        display: inline-block;
        width: 15px;
        height: 14px;
        background-position: -150px 0;
        &:hover {
          background-position: -150px -20px;
        }
      }
    }
  }
}
</style>